import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { Sticky, Cell } from 'react-vant'
import { Elevator } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'

export default function City() {
    let nav=useNavigate()
    const dataList = [
        {
            title: 'A',
            list: [
                {
                    name: '安徽',
                    id: 1,
                },
            ],
        },
        {
            title: 'B',
            list: [
                {
                    name: '北京',
                    id: 2,
                },
            ],
        },
        {
            title: 'C',
            list: [
                {
                    name: '重庆',
                    id: 3,
                },
            ],
        },
        {
            title: 'F',
            list: [
                {
                    name: '福建',
                    id: 4,
                },
            ],
        },
        {
            title: 'G',
            list: [
                {
                    name: '广西',
                    id: 5,
                },
                {
                    name: '广东',
                    id: 6,
                },
                {
                    name: '甘肃',
                    id: 7,
                },
                {
                    name: '贵州',
                    id: 8,
                },
            ],
        },
        {
            title: 'H',
            list: [
                {
                    name: '湖南',
                    id: 9,
                },
                {
                    name: '湖北',
                    id: 10,
                },
                {
                    name: '海南',
                    id: 11,
                },
                {
                    name: '河北',
                    id: 12,
                },
                {
                    name: '河南',
                    id: 13,
                },
                {
                    name: '黑龙江',
                    id: 14,
                },
            ],
        },
        {
            title: 'J',
            list: [
                {
                    name: '吉林',
                    id: 15,
                },
                {
                    name: '江苏',
                    id: 16,
                },
                {
                    name: '江西',
                    id: 17,
                },
            ],
        },
        {
            title: 'L',
            list: [
                {
                    name: '辽宁',
                    id: 18,
                },
            ],
        },
    ]
    const onItemClick = (key, item) => {
        console.log(key, JSON.stringify(item))
        sessionStorage.setItem('curAddress', item.name)
        setAddress(item.name)
        // nav('/index')
    }

    const onIndexClick = (key) => {
        console.log(key)
    }
    let [address, setAddress] = useState('')
    const back = () => {
        window.history.back();
    }
    // useEffect(() => {
    //     sessionStorage.setItem('curAddress', address)
    // }, [address])
    return (
        <div className='city'>
            <Sticky>
                <NavBar onBack={back} style={{ borderBottom: '1px solid gainsboro', padding: '5px 0', fontSize: '20px', fontWeight: '600', backgroundColor: 'white' }}>选择城市</NavBar>
            </Sticky>

            <div className='cityls'>
                <div className='cur'>当前选择<span>{sessionStorage.getItem('curAddress').length > 10 ? sessionStorage.getItem('curAddress').split('省')[1] : sessionStorage.getItem('curAddress')}</span></div>
                <p>定位城市</p>
                <span onClick={(e) => { sessionStorage.setItem('curAddress', e.target.innerHTML); setAddress(e.target.innerHTML);  }}>{ sessionStorage.getItem('address')}</span>
                <p>热门城市</p>
                <p>
                    <span onClick={(e) => { sessionStorage.setItem('curAddress',e.target.innerHTML);setAddress(e.target.innerHTML); }}>北京</span>
                    <span onClick={(e) => { sessionStorage.setItem('curAddress', e.target.innerHTML); setAddress(e.target.innerHTML);  }}>天津</span>
                    <span onClick={(e) => { sessionStorage.setItem('curAddress', e.target.innerHTML);setAddress(e.target.innerHTML);  }}>重庆</span>
                    <span onClick={(e) => { sessionStorage.setItem('curAddress', e.target.innerHTML); setAddress(e.target.innerHTML); nav('/index') }}>上海</span>
                </p>

            </div>
                <Elevator
                    style={{ position: 'fixed',bottom:0}}
                    list={dataList}
                    height="400"
                    sticky
                    onItemClick={(key, item) => onItemClick(key, item)}
                    onIndexClick={(key) => onIndexClick(key)}
                />

            
        </div>
    )
}
